<template>
  <view class="app">
    <view class="address-box">
      <view class="address-item" v-for="(item, index) in list" :key="index">
        <view class="item-left" @click="selectAddress(item.id)">
          <view class="address-title">
            <text class="mr-20rpx">{{ item.receiver }}</text>
            <text>{{ item.phone }}</text>
            <text class="address-mark address-default" v-if="item.is_default == 1">默认</text>
            <text class="address-mark address-tag" v-if="item.tag > 0">{{
              ['', '家', '公司', '学校'][item.tag]
            }}</text>
          </view>
          <view class="address-detail">
            <text>{{ item.province }}{{ item.city }}{{ item.area }}{{ item.address }}</text>
          </view>
        </view>
        <view class="item-right" @click="goto(item.id)">
          <image class="edit-img" mode="aspectFit" src="/static/icon/img/address/edit.png" />
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="add-btn" @click="goto(0)">
        <u-icon color="white" size="28" name="plus"></u-icon>
        <text class="ml-10rpx">新增地址</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { getAddressList } from '@/api/fans/address';
  import { report } from '@/utils/exception';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import type { FansAddress } from '@/types/fans';

  const list = ref<FansAddress[]>([]);
  let from = 'mine';

  const getAddress = () => {
    getAddressList()
      .then((res) => {
        list.value = res.data.list;
      })
      .catch((err) => {
        report(err);
      });
  };

  onLoad((option: any) => {
    from = option.from;
    getAddress();
  });

  onShow(() => {
    uni.$once('reload', () => {
      list.value = [];
      getAddress();
    });
  });

  const goto = (addressId: number) => {
    uni.navigateTo({ url: `/pages/address/form?id=${addressId}` });
  };

  const selectAddress = (id: number) => {
    if (from == 'mine') return false;

    uni.$emit('changeAddress', { address_id: id });
    uni.navigateBack();
  };
</script>

<style lang="scss" scoped>
  .address-box {
    margin: 25rpx;
    padding-bottom: 85rpx;

    .address-item {
      display: flex;
      background: white;
      padding: 20rpx;
      margin-bottom: 25rpx;
      border-radius: 20rpx;
      align-items: center;

      .item-left {
        display: flex;
        flex-direction: column;
        flex: 1;

        .address-title {
          display: flex;
          flex-direction: row;
          font-size: 30rpx;
          font-weight: bold;

          .address-mark {
            display: flex;
            justify-content: center;
            font-size: 22rpx;
            border-radius: 15rpx;
            padding: 4rpx 0;
            width: 62rpx;
            margin-left: 10rpx;
            font-weight: normal;
          }

          .address-default {
            color: white;
            background: #fc4644;
          }

          .address-tag {
            color: #cd2d2a;
            background: #fdf2f2;
          }
        }

        .address-detail {
          font-size: 28rpx;
          margin-top: 10rpx;
          line-height: 38rpx;
        }
      }

      .item-right {
        width: 70rpx;
        align-items: center;

        .edit-img {
          width: 45rpx;
          height: 45rpx;
        }
      }
    }
  }

  .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 110rpx;
    background: white;

    .add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      font-size: 26rpx;
      font-weight: 600;
      color: white;
      margin: 0 auto;
      padding: 24rpx 0;
      border-radius: 50rpx;
      letter-spacing: 1rpx;
      background-image: linear-gradient(to right, #f3204f, #f33720);
      box-shadow: rgba(255, 28, 0, 0.2) 0 5rpx 12rpx;
    }
  }
</style>
